<template>
  <div style="width: 90%;margin: 0 auto;font-size: 15px;font-weight: bold;">
    <Button type="primary" style="width:100px;margin-top: 10px;" @check="getParams" v-print="'#base_print'">打印</Button>
    <span style="top: 22px; padding-left: 10px; position: absolute;color: red;">(为了避免打印格式错乱，请尽量选择"横向"打印!)</span>
    <div id="base_print" ref="base_print" style="margin-top: 40px;">
      <div class="quest_content" id="printInfo">
        <p style="text-align:center;font-size:20px;font-weight: bold;padding-top: 10px;">
          <span>{{printName}}</span>
        </p>
        <template v-for="(item, index) in printInfo">
          <div class="qheader" :style="{borderBottom: '0px solid rgb(210,210,210)',fontSize: '15px'}">
            <p>{{item.title}}</p>
          </div>
          <div v-if="item.type == 'dafault'">
            <component ref="printModel" :is="'printModel'" :printObject="item.info.printObject"
              :printLength="item.info.printLength" style="width:93.5%;position:relative;left:4%;"></component>
          </div>
          <div v-else-if="item.type == 'account'">
            <accountUtils v-model="item.info" :ifedit="true" :print="true"></accountUtils>
          </div>
          <div v-else-if="item.type == 'usePeople' && serviceType=='entry_v2'">
            <component ref="usePeople" :is="'usePeople'" v-model="item.info.applyinfo" :ifedit="true"
              style="width:93.5%;"></component>
          </div>
          <div v-else-if="item.type == 'entry_resoureceInfo'">
            <component :is="'resoureceInfo'" :ifedit="true" :Papply="item.info.applyinfo"
              :Presources="item.info.resourcesInfo2"></component>
          </div>
          <div v-else-if="item.type == 'entry_toolInfo'">
            <!-- <component :is="'toolInfo'" :ifedit="true" :Papply="item.info.applyinfo" :Ptool="item.info.toolInfo"></component> -->
            <div class="gcontent">
              <div style="padding-left: 40px;" v-for="(tool,toolIndex) in item.info.toolInfo.toolList">
                <Row style="padding-top: 15px">
                  <Col span="12">
                  <Checkbox class="font_seize" v-model="ifedit" :disabled="true">
                    {{tool.toolName}}
                  </Checkbox>
                  </Col>
                </Row>
                <Row style="padding-top: 8px;padding-left:8px"
                  v-if="(tool.check || item.info.applyinfo.tools.checkList.indexOf(tool.toolId) != -1 )&& tool.needResources && tool.needResources.length > 0">
                  <Col span="21" style="width: 97%;">
                    <div :id="tool.toolId">
                      <template v-if="tool.spServiceType == 'dataEtl'">
                         <table width="100%">
                             <tr class="table_title">
                               <td width="10%">服务名称</td>
                               <td width="50%">传输方式</td>
                               <td width="10%">存储数据量</td>
                               <td width="30%">测算依据</td>
                             </tr>
                             <tr >
                               <td>
                                 <Checkbox v-model="tool.spContent.ifNeedPublicData" style="font-size: 14px;" :disabled="true"> 公有数据 </Checkbox>
                               </td>
                               <td>
                                 <CheckboxGroup  v-model="tool.spContent.publicTransmisMode">
                                   <Checkbox style="font-size: 14px;" label="实时" :disabled="ifedit">实时</Checkbox>
                                   <Checkbox style="font-size: 14px;" label="离线" :disabled="ifedit">离线</Checkbox>
                                 </CheckboxGroup>
                               </td>
                               <td><Input v-model="tool.spContent.publicMemory"
                                   :readonly="true" placeholder="每日传输数据量" /></td>
                               <td><Input v-model="tool.spContent.publicPurpose"
                                   type="textarea" :autosize="{minRows: 1,maxRows: 6}" :readonly="true" placeholder="每日传输数据量" /></td>
                             </tr>
                             <tr >
                               <td>
                                 <Checkbox v-model="tool.spContent.ifNeedPrivateData" style="font-size: 14px;" :disabled="true"> 私有数据
                                 </Checkbox>
                               </td>
                               <td>
                                 <CheckboxGroup v-model="tool.spContent.privateTransmisMode">
                                   <Checkbox style="font-size: 14px;" label="实时" :disabled="true">实时</Checkbox>
                                   <Checkbox style="font-size: 14px;" label="离线" :disabled="true">离线</Checkbox>
                                 </CheckboxGroup>
                               </td>
                               <td><Input v-model="tool.spContent.privateMemory" :readonly="true" placeholder="每日传输数据量" /></td>
                               <td><Input v-model="tool.spContent.privatePurpose" type="textarea" :autosize="{minRows: 1,maxRows: 6}"
                                   :readonly="true" placeholder="每日传输数据量" /></td>
                             </tr>
                           </table>
                         <template v-if="(tool.needResources && tool.needResources.length > 0)">
                           <Divider> 默认资源 </Divider>
                           <Row >
                             <Col span="24">
                             <table border="1px" class="tale" style="height: 40px;width: 100%;">
                               <tr align="center" class="tale_title" style="background-color: #f8f8f9;">
                                 <td v-for="title in item.info.toolInfo.toolColumns">{{title.title}}</td>
                               </tr>
                               <tr align="center" style="height: 40px;" v-for="data in tool.needResources">
                                 <td style="padding: 4px 8px;width: 10%;">
                                   {{data.clazz.split(".").length > 1 ? data.clazz.split(".")[1]:data.clazz}}</td>
                                 <td style="padding: 4px 8px;width: 10%;">
                                   {{data.serviceName.split(".").length > 1 ? data.serviceName.split(".")[1]:data.serviceName}}
                                 </td>
                                 <td style="padding: 4px 8px;width: 10%;">
                                   {{data.subName.split(".").length > 1 ? data.subName.split(".")[1]:data.subName}}</td>
                                 <td align="left" style="padding: 4px 8px;width: 35%;">
                                   <Row v-if="data.resourcetype == 0" style="width: 100%;">
                                     <Col span="12" class="col_info2">
                                     <span>*数量：</span>
                                     <span>{{data.quotaValue}}</span>
                                     </Col>
                                     <Col span="12" class="col_info2">
                                     <span>*单位：</span>
                                     <span>{{data.quotaUnit}}</span>
                                     </Col>
                                   </Row>

                                   <!-- 单选 -->
                                   <Row v-else-if="data.resourcetype == 1" style="width: 100%;">
                                     <Col span="24" class="col_info2" style="text-align: center;">
                                     <span>{{data.quotaValue}}</span>
                                     </Col>
                                   </Row>
                                   <!-- 文本框 -->
                                   <Row v-else-if="data.resourcetype == 3" style="width: 100%;">
                                     <template v-for="(item, key) in data.options">
                                       <Col span="24" :key="key">
                                       <span>*{{item}}：</span>
                                       <span>{{data.quotaValue}}</span>
                                       </Col>
                                     </template>
                                   </Row>
                                   <!-- 多选 -->
                                   <Row v-else-if="data.resourcetype == 4" style="width: 100%;">
                                     <Col span="24" style="text-align: center;">
                                     <CheckboxGroup v-model="data.quotaValue == undefined ? data.val:data.quotaValue ">
                                       <Checkbox v-for="(item,key1) in data.options" :key="key1" :label="item" :disabled="true">
                                         {{item}}</Checkbox>
                                     </CheckboxGroup>
                                     </Col>
                                   </Row>
                                   <!-- 双副本 -->
                                   <Row v-if="data.resourcetype == 5" style="width: 100%;">
                                     <Col span="12" class="col_info2">
                                     <span>*双副本数量：</span>
                                     <span>{{data.quotaValue}}</span>
                                     </Col>
                                     <Col span="11" class="col_info2">
                                     <span>*单位：</span>
                                     <span>{{data.quotaUnit}}</span>
                                     </Col>
                                     <Col span="12" class="col_info2">
                                     <span>*单副本数量：{{data.quotaValue != undefined ? data.quotaValue/2:0}}</span>
                                     </Col>
                                   </Row>
                                   <!-- 三副本 -->
                                   <Row v-if="data.resourcetype == 6" style="width: 100%;">
                                     <Col span="12" class="col_info2">
                                     <span>*三副本数量：</span>
                                     <span>{{data.quotaValue}}</span>
                                     </Col>
                                     <Col span="11" class="col_info2">
                                     <span>*单位：</span>
                                     <span>{{data.quotaUnit}}</span>
                                     </Col>
                                     <Col span="12" class="col_info2">
                                     <span>*单副本数量：{{data.quotaValue != undefined ? parseFloat(data.quotaValue/3).toFixed(2):parseFloat(data.val/3).toFixed(2)}}</span>
                                     </Col>
                                   </Row>
                                 </td>
                                 <td style="padding: 4px 8px;width: 35%;">{{data.purpose}}</td>
                               </tr>
                             </table>
                             </Col>
                           </Row>
                         </template>
                         <template v-if="tool.spContent.ifNeedPublicData">
                           <Divider> 公有数据申请信息 </Divider>
                           <table border="1px" class="tale" align="center" style="width:100%;">
                               <tr align="left" style="height: 3vw;" >
                                     <th class="my-th">数据需求频率</th>
                                     <td class="my-td">{{tool.spContent.dataFrequent}}</td>
                                     <th class="my-th">数据生效时间</th>
                                     <td class="my-td">{{tool.spContent.actTime}}</td>
                                     <th class="my-th">数据生效时间</th>
                                     <td class="my-td">{{tool.spContent.actTime}}</td>
                               </tr>
                               <tr align="left" style="height: 3vw;" >
                                     <th class="my-th">ETL工具</th>
                                     <td class="my-td">{{tool.spContent.etlTool}}</td>
                                     <th class="my-th">是否安全审批</th>
                                     <td class="my-td">{{tool.spContent.isSafe}}</td>
                                     <th class="my-th">安全加密要求</th>
                                     <td class="my-td">{{tool.spContent.encryption}}</td>
                               </tr>
                               <tr align="left" style="height: 3vw;" >
                                     <th class="my-th">需求描述</th>
                                     <td class="my-td">{{tool.spContent.reqDes}}</td>
                                     <th class="my-th">备注</th>
                                     <td class="my-td">{{tool.spContent.remark}}</td>
                                     <th class="my-th"></th>
                                     <td class="my-td"></td>
                               </tr>
                           </table>
                           <component :is="'dataInfo'" :isPrint="true" :ifedit="true" :Papply="tool.spContent"></component>
                         </template>
                      </template>
                       <template v-else>
                         <table border="1px" class="tale" style="height: 40px;width: 100%;">
                           <tr align="center" class="tale_title" style="background-color: #f8f8f9;">
                             <td v-for="title in item.info.toolInfo.toolColumns">{{title.title}}</td>
                           </tr>
                           <tr align="center" style="height: 40px;" v-for="data in tool.needResources">
                             <td style="padding: 4px 8px;width: 10%;">
                               {{data.clazz.split(".").length > 1 ? data.clazz.split(".")[1]:data.clazz}}</td>
                             <td style="padding: 4px 8px;width: 10%;">
                               {{data.serviceName.split(".").length > 1 ? data.serviceName.split(".")[1]:data.serviceName}}
                             </td>
                             <td style="padding: 4px 8px;width: 10%;">
                               {{data.subName.split(".").length > 1 ? data.subName.split(".")[1]:data.subName}}</td>
                             <td align="left" style="padding: 4px 8px;width: 35%;">
                               <Row v-if="data.resourcetype == 0" style="width: 100%;">
                                 <Col span="12" class="col_info2">
                                 <span>*数量：</span>
                                 <span>{{data.quotaValue}}</span>
                                 </Col>
                                 <Col span="12" class="col_info2">
                                 <span>*单位：</span>
                                 <span>{{data.quotaUnit}}</span>
                                 </Col>
                               </Row>

                               <!-- 单选 -->
                               <Row v-else-if="data.resourcetype == 1" style="width: 100%;">
                                 <Col span="24" class="col_info2" style="text-align: center;">
                                 <span>{{data.quotaValue}}</span>
                                 </Col>
                               </Row>
                               <!-- 文本框 -->
                               <Row v-else-if="data.resourcetype == 3" style="width: 100%;">
                                 <template v-for="(item, key) in data.options">
                                   <Col span="24" :key="key">
                                   <span>*{{item}}：</span>
                                   <span>{{data.quotaValue}}</span>
                                   </Col>
                                 </template>
                               </Row>
                               <!-- 多选 -->
                               <Row v-else-if="data.resourcetype == 4" style="width: 100%;">
                                 <Col span="24" style="text-align: center;">
                                 <CheckboxGroup v-model="data.quotaValue == undefined ? data.val:data.quotaValue ">
                                   <Checkbox v-for="(item,key1) in data.options" :key="key1" :label="item" :disabled="true">
                                     {{item}}</Checkbox>
                                 </CheckboxGroup>
                                 </Col>
                               </Row>
                               <!-- 双副本 -->
                               <Row v-if="data.resourcetype == 5" style="width: 100%;">
                                 <Col span="12" class="col_info2">
                                 <span>*双副本数量：</span>
                                 <span>{{data.quotaValue}}</span>
                                 </Col>
                                 <Col span="11" class="col_info2">
                                 <span>*单位：</span>
                                 <span>{{data.quotaUnit}}</span>
                                 </Col>
                                 <Col span="12" class="col_info2">
                                 <span>*单副本数量：{{data.quotaValue != undefined ? data.quotaValue/2:0}}</span>
                                 </Col>
                               </Row>
                               <!-- 三副本 -->
                               <Row v-if="data.resourcetype == 6" style="width: 100%;">
                                 <Col span="12" class="col_info2">
                                 <span>*三副本数量：</span>
                                 <span>{{data.quotaValue}}</span>
                                 </Col>
                                 <Col span="11" class="col_info2">
                                 <span>*单位：</span>
                                 <span>{{data.quotaUnit}}</span>
                                 </Col>
                                 <Col span="12" class="col_info2">
                                 <span>*单副本数量：{{data.quotaValue != undefined ? parseFloat(data.quotaValue/3).toFixed(2):parseFloat(data.val/3).toFixed(2)}}</span>
                                 </Col>
                               </Row>
                             </td>
                             <td style="padding: 4px 8px;width: 35%;">{{data.purpose}}</td>
                           </tr>
                         </table>

                         <div v-if="tool.needSevers" style="margin-top: 10px;">
                           <component :is="'server_model'" :ifedit="true" v-model="tool.needSevers" :isPrint="true"></component>
                         </div>
                       </template>
                    </div>
                  </Col>

                </Row>
              </div>
            </div>
          </div>
          <div v-else-if="item.type == 'entry_server'">
            <template v-if="item.info.server.length > 0">
              <div class="gcontent">
                <div style="padding-left: 40px;" >
                  <component :is="'server_model'" :ifedit="true" v-model="item.info.server" :isPrint="true"></component>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="gcontent" style="text-align:center">
                <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无物理机信息</span>
              </div>
            </template>
          </div>
          <div v-else-if="item.type == 'entry_dataInfo'">
            <Divider> 数据表 </Divider>
            <component :is="'dataInfo'" :isPrint="true" :ifedit="true" :Papply="item.info.applyinfo"></component>
            <div class="gcontent" v-if="item.info.openApiPlatformList && item.info.openApiPlatformList.length > 0">
              <Divider> 开放平台接口 </Divider>
              <div style="padding-left: 40px;">
                <Row style="padding-top: 8px;padding-left:8px">
                  <Col span="21" style="width: 97%;">
                  <table border="1px" class="tale" style="height: 40px;width: 100%;">
                    <tr align="center" class="tale_title" style="background-color: #f8f8f9;">
                      <td v-for="title in apiServColumns">{{title.title}}</td>
                    </tr>
                    <tr align="center" style="height: 40px;" v-for="api in item.info.openApiPlatformList">
                      <td style="padding: 4px 8px;width: 10%;">{{api.requestUrl}}</td>
                      <td style="padding: 4px 8px;width: 10%;">{{api.apiLabel}}</td>
                      <td style="padding: 4px 8px;width: 10%;">{{api.apiDescr}}</td>
                    </tr>
                  </table>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
          <div v-else-if="item.type == 'entry_account'">
            <template v-if="item.info.applyinfo != undefined && item.info.applyinfo != null">
              <component v-if="serviceType=='entry'" :is="'account'" :ifedit="true" :Papply="item.info.applyinfo">
              </component>
              <component v-else-if="serviceType=='entry_v2'" :is="'accountV2'" v-model="item.info.applyinfo"
                :isEdit="false" :isShow="true" :isPrint="true" :ifedit="true"
                style="width:93.5%;position:relative;left:4%"></component>
            </template>
            <template v-else>
              <div class="gcontent" style="text-align:center">
                <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无账号信息</span>
              </div>
            </template>
          </div>
        </template>
        <div class="qheader" style="border-bottom: 0px;font-size: 15px;">
          <p>领导意见和签字</p>
        </div>
        <div class="gcontent">
          <div style="padding-left: 40px;">
            <Row style="padding-top: 8px;padding-left:8px">
              <Col span="21" style="width: 97%;">
              <div style="border: 1px solid #000; height: 100px;">
                <span style="position:relative;left:80%;top:60px;">签名：</span>
              </div>
              </Col>
            </Row>
          </div>
        </div>
      </div>

      <template>

      </template>
    </div>
  </div>
</template>

<script>
  import projectInfo from '../settledin/projectInfo'
  import resoureceInfo from '../settledin/resourceInfo'
  import toolInfo from '../settledin/toolInfo'
  import dataInfo from '../settledin/dataInfo'
  import account from '../settledin/account'
  import accountV2 from '../settledin_test/accounttemplate.vue'
  import printModel from '../print/print_model'
  import accountUtils from '../other_utils/account_utils.vue'
  import resourceTable from '../../../base/tables.vue'
  import usePeople from '../settledin_test/usePeople.vue'
  import server_model from '../apply_model/server_model.vue'
  import ucx_model from '../apply_model/ucx_model/ucx.vue'

  export default {
    name: "printTest",
    components: {
      projectInfo,
      resoureceInfo,
      toolInfo,
      dataInfo,
      account,
      accountV2,
      printModel,
      accountUtils,
      resourceTable,
      usePeople,
      server_model,ucx_model
    },
    data() {
      return {
        toolColumns: [{
            title: '服务类型',
            key: 'clazz',
            align: 'left',
            width: 100,
            slot: "clazz"
          },
          {
            title: '服务类型',
            key: 'serviceName',
            align: 'left',
            width: 100,
            slot: "serviceName"
          },
          {
            title: '服务名称    ',
            key: 'subName',
            align: 'left',
            width: 100,
            slot: "subName"
          },
          {
            title: '*可选项',
            key: 'options',
            align: 'left',
            slot: 'options'
          },
          {
            title: '*测算依据',
            key: 'reason',
            align: 'left',
            slot: 'reason'
          }
        ],
        ifedit: true,
        serviceType: "",
        printName: "",
        printInfo: {},
        people: [],
        apiServColumns: [{
            title: '请求路径',
            key: 'requestUrl',
            width: 200,
          },
          {
            title: 'API中文名',
            key: 'apiLabel',
            width: 200,
          },
          {
            title: '描述',
            key: 'apiDescr',
            minWidth: 150
          }
        ],
      }
    },
    created() {
      this.serviceType = this.$route.query.serviceType
      this.printName = this.$route.query.printName
      var printId = this.$route.query.printId
      
      this.printInfo = JSON.parse(window.sessionStorage.getItem(printId))
      console.log("---printInfo--->", this.printInfo)
    },
    updated: function() {
      this.getParams()
    },
    mounted: function() {
      this.$forceUpdate();
    },
    methods: {
      getParams() {
        var temp = document.getElementById("printInfo").getElementsByTagName("table")
        console.log("temp--ss-->", temp, this.serviceType)
        for (let i = 0; i < temp.length; i++) {
          if (this.serviceType == 'entry' || this.serviceType == 'entry_v2') {
            temp[i].style.width = '100%'
          }
          temp[i].style.border = "1px solid #000"
          temp[i].style.fontSize = "15px"
        }
        var temp2 = document.getElementById("printInfo").getElementsByTagName("td")
        for (let i = 0; i < temp2.length; i++) {
          temp2[i].style.borderRight = "1px solid #000"
          temp2[i].style.borderBottom = "1px solid #000"
          temp2[i].style.fontSize = "15px"
        }
        var temp3 = document.getElementById("printInfo").getElementsByTagName("th")
        for (let i = 0; i < temp3.length; i++) {
          temp3[i].style.borderRight = "1px solid #000"
        }
      }
    }
  }
</script>
<style lang="scss">
  @import "../../../utils/base.scss";

  @page {
    margin: 10mm;
    /* this affects the margin in the printer settings */
  }

  .ivu-table table {
    table-layout: auto;
    width: 100%;
  }

  .col_info2 {
    // text-align: right;
    text-align: left;
    padding-right: 20px;
    padding-bottom: 4px;
    padding-top: 4px;
  }

  .my-table-title {
    border-top-style: solid;
    border-left-style: solid;
    border-width: 1px;
    border-color: #7b7777;
    float: left;
    width: 15%;
    font-weight: bolder;
    overflow: hidden;
  }

  .my-table-content {
    border-top-style: solid;
    border-left-style: solid;
    border-width: 1px;
    border-color: #7b7777;
    float: left;
    width: 35%;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
  }

  .my-table-last {
    border-bottom: 1px solid rgb(210, 210, 210);
    border-width: 1px;
    border-color: #7b7777;
    padding-bottom: 1cm;
    width: 600px;
  }

  .my-th {
    width: 10vw;
    padding-left: 10px;
  }

  .my-td {
    width: 20vw;
    padding-left: 10px;
  }
</style>
